<template>
  <div class="allCustomersManagement">
    <div class="export">
      <Button type="primary" @click="exportExcel"
        v-if="unlocking('0107010100')">导出excel</Button>
    </div>
    <dt-grid ref="table" :page='page' :onFetch='onFetch' />
    <!-- <Table ref="TableHeight" :max-height="onresizeHeight" :columns="columns1" :data="data1">
    </Table>

    <page :pageData='pageData' @pageOnChangeFun='pageOnChangeFun'
      @pageOnPageSizeChangeFun='pageOnPageSizeChangeFun'></page>

    <table_filter ref="filterTable" :options="options" @cancelFilterFun="cancelFilterFun"
      @okFilterFun="okFilterFun"></table_filter>

    <Modal v-model="readFlag" width="300" :footerHide="true" @on-cancel="modalCancel"
      :closable='false' class-name="modalClass">
      <p slot="header">
        <span class="readTitle">阅读人数明细</span>
      </p>
      <div class="readAll">
        <div class="readBox">
          <ul>
            <li v-for="item in readDetails" :key="item.id">
              <img :src="item.avatar" alt="">
              <p><span>{{item.nick}}</span><em>{{item.visitDate}}</em></p>
            </li>
          </ul>
        </div>

        <div class="examineBtn" @click="modalCancel">
          <Icon type="md-close" />
        </div>
      </div>
    </Modal> -->
  </div>
</template>
<script>
  import toolApi from '@/biz/base/tool'
  import reportMgr from '@/biz/report/report'
  import columnOpt from './opt/reportListColumn.js'
  export default {
    components: {
      // table_filter,
    },
    data() {
      return {
        // readFlag: false,
        // readDetails: [],
        ByvalUserId: this.$route.query.ByvalUserId,
        ByvalStatus: this.$route.query.ByvalStatus,
        page: {
          total: 0,
        },
      }
    },
    methods: {
      // modalCancel() {
      //   this.readFlag = false
      // },
      // readCountDetails(val) {
      //   let params = {
      //     reportId: val.reportId,
      //   }

      //   reportMgr
      //     .readDetail(params)
      //     .then((res) => {
      //       console.log(res, '阅读人数明细')
      //       if (res && res.length) {
      //         this.readDetails = res
      //         this.readFlag = true
      //       }
      //     })
      //     .catch((err) => {
      //       this.$Message.error(err)
      //     })
      // },
      onFetch(data) {
        this.paramsAll = {
          ...data,
          buildingId: this.$dt.buildInfo().housesId,
          userId: this.ByvalUserId,
          reportIdList: this.$route.params.needSendsAll || [],
        }
        return reportMgr
          .backList(this.paramsAll).then(res => {
            this.page.total = res.total
            return res.list
          }).catch(err => {
            this.total = 0
          })

      },
      // 导出excel
      exportExcel() {
        toolApi.downloadCenter('/dt-marketing/v1/aggs/report/userDetailReportExport', this
          .paramsAll)
      },

    },
    mounted() {
      this.$refs.table.init(this, new columnOpt(this))
      this.$refs.table.fetch()
    },
  }
</script>
<style lang="scss" scoped>
  .allCustomersManagement {
    padding-top: 10px;
  }

  .export {
    margin: 10px 0 10px 30px;
  }

  .readTitle {
    font-size: 18px;
    color: #000;
    // font-weight: bold;
    display: block;
    text-align: center;
  }

  .readAll {
    // position: relative;

    .examineBtn {
      position: absolute;
      top: -50px;
      right: -50px;
      font-size: 40px;
      color: #fff;
      cursor: pointer;
    }

    .readBox {
      max-height: 500px;
      overflow-y: auto;

      ul {
        li {
          margin-top: 16px;
          display: flex;
          flex-direction: row;

          img {
            display: block;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            margin-right: 10px;
            margin-left: 24px;
          }

          p {
            span {
              display: block;
              color: #333;
              font-size: 14px;
              margin-top: 2px;
            }

            em {
              font-size: 12px;
              color: #999;
              font-style: normal;
            }
          }
        }
      }
    }
  }
</style>